<template>
    <div class="gvb_nav">
        <div class="gvb_container">
            <div class="logo">
                <div>陈阿七</div>
                <div>CHENA7</div>
            </div>
            <div class="left">
                <span><a href="#" class="home-link">首页</a></span>
                <span><a href="https://www.yuque.com/chenxiangyang-n12yg/pli7v5?# 《Go》">Goland</a></span>
                <span><a href="">Mysql</a></span>
                <span><a href="">Redis</a></span>
                <span><a href="https://www.programmercarl.com/qita/language.html">代码随想录</a></span>
                <span><a href="https://tsejx.github.io/javascript-guidebook/computer-networks">计网</a></span>
            </div>
            <div class="right">
                <router-link to="/login">用户登录  </router-link>  
                <router-link to="/login">后台登录</router-link>  
                <router-view></router-view> 
            </div>
        </div>
    </div>

</template>



<script>  
</script>


<style lang="scss" scoped>
    .gvb_nav {
        background-color: transparent;
        height: 60px;
        display: flex;
        justify-content: center;
        position: fixed; /* 固定在顶部 */
        // top: 0; /* 顶部对齐 */
        // left: 0; /* 左侧对齐 */
        // box-shadow: 1px 1px 5px #0003;
        z-index: 10; /* 确保在其他内容之上 */
        width: 100%;
        font-size: 16px;

        .gvb_container {
            display: flex;
            justify-content: space-between;
            align-items: center; /* 垂直居中 */
            width: 1200px; /* 或 100% 以适应屏幕 */
           
            .logo {
                width: 20%;
                div:first-child {
                    font-size: 20px;
                }
                div:last-child {
                    font-size: 15px;
                }
                div{
                    color: white;
                }
            }

            .left {
                width: 55%;           
                span{
                    margin-right: 30px;
                }

                a {
                    text-decoration: none;
                    color: white;
                    font-size: 18px
                }
            }

            .right {
                width: 25%;
                span{
                    margin-right: 20px;
                }

                a {
                    text-decoration: none;
                    color: white;
                    font-size: 18px
                }
            }
        }
    }
</style>